<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useSysStore } from "stores/sysStore";
import { loginOut, userBehavior, isWorkTime } from "src/utils/util";
import VideoCallIng from "pages/videoCallIng.vue";
import { Wss, UserInfo, TypeRTCConfig } from "src/utils/type";
import eventBus from "src/utils/eventBus";
import { useQuasar } from "quasar";
import Evaluate from "pages/components/evaluate.vue";

let $q = useQuasar()
let sysStores = useSysStore();
let calling = ref(false)
let videoIng = ref(false)
const waitTime = ref(0)

onMounted(() => {
  //进入页面后先查看群众是否还在呼叫中（规避群众呼叫反复刷新页面的情况）
  sysStores.sendWss({ message_type: 'get_online_users' });
  if(sysStores.fromAgent) {
    callWorker(true);
  }
})

const customers = ref<string | number | null>(0) //等待人数
watch(() => sysStores.wssMessage, (newVal) => {
  console.log('接受消息', newVal)
  //checkCallState(newVal as Wss)
  let msg: Wss = (newVal as Wss);
  customers.value = msg?.message?.customers
  if (msg.message_type == 'online_status') {
    sysStores.behaviorId = msg?.behavior_id || '';
  }
  //工作人员已经接待，现在通知群众进入频道开始视频连线
  if (msg.message_type == 'invite_custom_connection') {
    videoIng.value = true;
  }
  if (msg.message_type == 'offline_status') {
    calling.value = false;
  }
})

//群众在进入页面的时候，需要检查自己是否依然在线，如果在线需要程序直接进入channel中（兼容群众刷新浏览器的情况）
const checkCallState = (msg: Wss) => {
  calling.value = msg.message_type == 'online_status';
}

//获取在线的用户。用于显示当前位置前方还有多少人排队
const getOnlineUser = () => {
  sysStores.sendWss({ message_type: 'get_online_users' });
}

//呼叫坐席，或者是终止呼叫
const isNoLine = ref(true) //是否是工作时间
const callWorker = (state: boolean) => {
  // isNoLine.value = isWorkTime()
  // if (!isNoLine.value) return;//调试时无需开启
  if (state) countTime();
  else waitTime.value = 0;
  sysStores.sendWss({
    message_type: state ? 'online' : 'offline',
    message: '呼叫',
  })
  calling.value = true;
}

//呼叫便开始记时，挂断或者接通计时清零
function countTime () {
  waitTime.value = 0;
  let timer = setInterval(() => {
    waitTime.value += 1;
    if (!calling.value) {
      clearInterval(timer);
      waitTime.value = 0;
    }
  }, 1000);
}

//跳转到智能问答
const hrefToAgent = () => {
  window.open('https://deyang.flopsai.cn')
}

//videoCalling中出发离开的时候，页面需要回到操作台
let evaluateDom = ref(null)
eventBus.$on('leaveChannel', async () => {
  let channelInstanceId = '';
  channelInstanceId = sysStores.RTCConfig.channel_instance_id;
  videoIng.value = false;
  calling.value = false;
  userBehavior({
    operation_type_id: 'exit_channel',
    operation_content: '离开频道'
  })
  evaluateDom.value.openDialog(channelInstanceId);
  sysStores.RTCConfig = {} as TypeRTCConfig;
})

const testEvaluste = () => {
  evaluateDom.value.openDialog('192b0c1f-3d4e-4f5a-8b6c-7d8e9f0a1b2c');
}

</script>

<template>
  <VideoCallIng :key="Math.random()" v-if="videoIng" role="crowd"></VideoCallIng>
  <div v-else class="call-worker">
    <div v-if="!calling">
      <div class="tit">
        <div class="c1" @click="testEvaluste">政务视频远程服务助手</div>
        <div class="c2">我们将通过视频的形式,为您提供事项咨询、材料帮看、远程帮办服务</div>
        <div class="c2">视频连接成功后，将有坐席工作人员为您提供远程面对面服务！</div>
      </div>
      <div class="call">
        <q-btn class="btn-help" size="lg" color="white" text-color="black" @click="callWorker(true)" label="请 求 帮 助" />
        <!-- <div class="user">欢迎您：{{ (sysStores.userInfo as UserInfo).display_name }}<span @click="loginOut"
            class="iconfont">&#xe621;</span>
        </div> -->
        <div class="tis">点击“请求帮助”即可发起与工作人员的连接</div>
      </div>
    </div>
    <div class="calling" v-else>
      <div class="user">欢迎您：{{ (sysStores.userInfo as UserInfo).display_name }}</div>
      <div v-if="isNoLine">
        <div class="c1">
          <div class="c11">
            <span class="c2s" @click="getOnlineUser">正在为您呼叫……</span>
          </div>
          <img class="c1s" @click="callWorker(false)" src="../../assets/images/guaduan.png" alt="" />
        </div>
        <div class="wait" v-show="waitTime > 15">客服正忙，请耐心等待</div>
        <div class="c3">
          <span v-show="customers && customers > 0">当前有{{ customers }}人正在排队</span>
        </div>
      </div>
      <div v-else class="notime">
        <div class="alert">请在工作时间进行视频连线</div>
        <div class="time-desc">工作日9:00到12:00,13:00到17:00</div>
      </div>
      <div class="c2">
        您可以点这里<span @click="hrefToAgent">智能助手<img class="cbom-icon"
            src="../../assets/images/index/help.png" /></span>为您提供咨询服务。
      </div>
    </div>
  </div>

  <evaluate ref="evaluateDom"></evaluate>
</template>

<style scoped lang="scss">
.call-worker {
  user-select: none;
  color: #fff;

  .tit {
    padding-bottom: 20px;

    .c1 {
      font-size: 30px;
      font-weight: bold;
    }

    .c2 {
      padding-top: 10px;
      color: #f2f2f2;
      font-size: 16px;
    }
  }

  .call {
    .user {
      padding-top: 20px;
      font-size: 16px;
      color: #fff;

      .iconfont {
        padding-left: 10px;
        font-size: 18px;
        color: #f0f0f0 !important;
        cursor: pointer;
      }
    }

    .btn-help {
      font-size: 22px !important;
      color: #689FF2 !important;
      font-weight: bold;
    }
  }

  .no-login,
  .call {
    .tis {
      padding-top: 10px;
      font-size: 16px;
      color: #f5f5f5;
    }
  }

  .calling {
    width: 500px;
    height: 260px;
    padding: 30px 60px;
    background: #D9D9D9;
    border-radius: 20px;
    box-sizing: border-box;

    .user {
      color: #666 !important;
      line-height: 20px;
      font-size: 16px;
    }

    .c11 {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .c1 {
      font-size: 30px;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #666;

      .c1s {
        color: #8c8c8c;
        width: 40px;
        height: 40px;
        transition: all .3s ease-in-out;
        transform: scale(1.0);
        cursor: pointer;
      }

      .c2s {
        font-weight: 500;
      }

      .c3s {
        width: 100px;
        margin-right: 30px;
        height: 100px;
      }

      .c1s:hover {
        transition: all .3s ease-in-out;
        transform: scale(1.5);
      }
    }

    .c2 {
      font-size: 15px;
      color: #666;
      text-align: center;

      span {
        color: #5fafff;
        font-weight: bold;
        font-size: 16px;
        padding: 0 5px;
        cursor: pointer;
        position: relative;

        .cbom-icon {
          position: absolute;
          top: 20px;
          left: 0;
          right: 0;
          margin: auto;
          width: 40px;
          height: 40px;
        }
      }

      span:hover {
        color: #1976D2;
        text-decoration: underline;
      }
    }
    .wait{
      font-size: 16px;
      color: #666;
    }
    .c3 {
      font-size: 16px;
      color: #666;
      text-align: center;
      line-height: 70px;
      padding-top: 30px;

      .c31 {
        padding-left: 20px;
      }
    }

    .notime {
      text-align: center;
      margin-bottom: 30px;

      .alert {
        font-size: 26px;
        color: #333;
        line-height: 50px;
        margin-top: 30px;
      }

      .time-desc {
        font-size: 16px;
        color: #333;
        line-height: 20px;
      }
    }
  }
}
</style>
